/*
 * 商品列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-15 10:49:10
 */
<style lang="less" rel="stylesheet/less" type="text/less" >
	.v-admin-customer-index{
		.ivu-table-cell{
			padding: 5px;
		}
		.address {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.license{
			display: inline-block;
			width: 60px;
			height: 60px;
			position: relative;
		}
		.license > img {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
			left: 50%;
			top: 50%;
			cursor: pointer;
			transform: translate(-50%,-50%);
		}
		.water_mark {
			display: inline-block;
			width: 60px;
			height: 60px;
			position: relative;
		}
		.water_mark > img {
			position: absolute;
			max-width: 100%;
			max-height: 100%;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-admin-customer-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="customers"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';
import showPictureMixin from 'src/views/mixins/showPictureMixin'; // 引入mixins文件
import { computedTableHeight } from 'src/views/mixins/computedTableHeight'; // 引入mixins文件
import expandRow from './expand-row';

export default {

	name: 'AdminCustomersIndex',

	mixins: [showPictureMixin, computedTableHeight],

	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		customers: {
			type: Array,
			default() {
				return [];
			},
		},
		fetchStoreTokenOnce: {
			type: Function,
			required: true,
		},
	},

	data() {
		return {

			columns: [
				{
					type: 'expand',
					width: 50,
					render: (h, { row }) => h(expandRow, {
						props: {
							row: row.customer_admins,
							accessStore: this.accessStore,
							provider_type: row.provider_type,
						},
					}),
				},
				{
					title: this.$t('customer.customer_account'),
					key: 'account',
					align: 'center',
					render: (h, { row }) => (<div>  { row.account || '-'} </div>),
				},
				{
					title: this.$t('customer.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('customer.legal_person'),
					key: 'legal_person',
					width: 80,
					align: 'center',
					render: (h, { row }) => <div> { row.legal_person || '-' } </div>,
				},
				{
					title: this.$t('customer.telephone'),
					width: 100,
					key: 'telephone',
					align: 'center',
					render: (h, { row }) => <div> { row.telephone || '-' } </div>,
				},
				{
					title: this.$t('customer.contacts'),
					key: 'contacts',
					align: 'center',
					render: (h, { row }) => <div> { row.contacts || '-' } </div>,
				},
				{
					title: this.$t('customer.phone'),
					key: 'phone',
					width: 100,
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: this.$t('customer.license'),
					key: 'license',
					align: 'center',
					render: (h, { row }) => {
						const img = row.license ? <img onClick={() => this.showPicture(row.license) } src={ row.license} alt={this.$t('common.not')}/> : this.$t('common.not');
						return (<div class="license">{ img }</div>);
					},
				},
				{
					title: this.$t('customer.water_mark'),
					key: 'water_mark',
					align: 'center',
					render: (h, { row }) => {
						const img = row.water_mark ? <img onClick={() => this.showPicture(row.water_mark) } src={ row.water_mark} alt={this.$t('common.not')}/> : this.$t('common.not');
						return (<div class="water_mark">{ img }</div>);
					},
				},
				{
					title: this.$t('customer.address'),
					key: 'address',
					align: 'center',
					render: (h, { row }) => <div class="address" title={this.joinAddress(row)}> { this.joinAddress(row) || '-' } </div>,
				},
				{
					title: this.$t('customer.provider_type'),
					width: 90,
					key: 'provider_type',
					align: 'center',
					render: (h, { row }) => <div> { this.getProviderType(row.provider_type) } </div>,
				},
				{
					title: this.$t('customer.categories'),
					width: 60,
					key: 'categories',
					align: 'center',
					render: (h, { row }) => <div>{ row.categories.length }</div>,
				},
				{
					title: this.$t('customer.is_deleted'),
					key: 'is_deleted',
					width: 60,
					align: 'center',
					render: (h, { row }) => <div> { Number(row.is_deleted) === 0 ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon> || '-' } </div>,
				},
				{
					title: this.$t('customer.has_youzan'),
					key: 'has_youzan',
					width: 60,
					align: 'center',
					render: (h, { row }) => <div> { Number(row.has_youzan) === 0 ? <Icon type="close"></Icon> : <Icon type="checkmark"></Icon> || '-' } </div>,
				},
				{
					title: this.$t('customer.is_debug'),
					key: 'is_debug',
					width: 60,
					align: 'center',
					render: (h, { row }) => <div> { Number(row.is_debug) === 1 ? <Icon type="checkmark"></Icon> : <Icon type="close"></Icon> || '-' } </div>,
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					width: 80,
					align: 'center',
					render: (h, { row }) => {
						let date = <div>{this.$t('common.none')}</div>;
						if (row.created_at) {
							const [day, time] = row.created_at.split(' ');
							date = (<div>
								<div>{day}</div>
								<div>{time}</div>
							</div>);
						}
						return date;
					},
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 135,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
							{
								row.is_deleted
									?
									<Button size="small" on-click={() => { this.$emit('recovery', row); }} type="success">
										{this.$t('customer.recover')}
									</Button>
									:
									<Button size="small" on-click={() => { this.$emit('delete', row); }} type="error">
										{this.$t('customer.stop')}
									</Button>
							}
						</div>),
				},
			],
		};
	},

	methods: {

		/**
        * 获取商户类型
        * @param  {number} record {属性参数}
        * @return {undefined}
        */
		getProviderType(record) {
			switch (Number(record)) {
			case 1:
				return this.$t('customer.virtual_provider'); // 虚拟供应商
			case 2:
				return this.$t('customer.general_customer');// 普通客户
			case 3:
				return this.$t('customer.bought_software_customer');//  '购买软件客户';
			default:
				return this.$t('customer.unknown'); // 未知
			}
		},

		/**
		* 组合地址
		* @param  {Object} row {行对应的对象}
		* @return {string} {拼接完成的地址}
		*/
		joinAddress(row) {
			return (row.province || '') + (row.city || '') + (row.district || '') + (row.address || '');
		},


		/**
		 *  是否是虚拟供应商
		 * @param {Number} type_value {是否是虚拟供应商}
		 * @return {undefined}
		 */
		isVirtualProvider(type_value) {
			return type_value === 1;
		},

		/**
		 * 登陆商家后台
		 * @param {string} account {账号}
		 * @param {numbre} customer_id {商家 id}
		 */
		accessStore(account, id, type_value) {
			// if (this.isVirtualProvider(type_value)) {
			// 	this.$Message.warning(this.$t('customer.view_virtual_tips'));
			// 	return;
			// }
			this.fetchStoreTokenOnce(id)
				.then((token) => {
					if (token) {
						this.openWindow(account, token, type_value);
					}
				});
		},

		/**
		 *  打开新window窗口
		 */
		openWindow(account, token, type_value) {
			const language = this.$i18n.locale;
			const path = `${window.location.pathname}?lang=${language}`;
			const hash = `#/cust-login?account=${account}&token=${token}&type_value=${type_value}`;
			const url = window.location.origin + path + hash;
			const width = 1820;
			const Height = 800;
			const left = (window.screen.width - width) / 2;
			const top = (window.screen.availHeight - Height) / 2;
			const newWindow = window.open(url, '_blank', `width=${width}, height=${Height}, left=${left}, top=${top}, toolbar=no, location=no, directories=no, status=no, menubar=no, fullscreen=yes`);
			// const newWindow = window.open(url);
			if (newWindow) {
				newWindow.focus();
			}
		},
	},
};
</script>
